/* import font */
@import '@fontsource-variable/open-sans';
@import '@fontsource-variable/inter';

/* editor */
@import 'react-quill/dist/quill.snow.css';

/* import tailwind */
@import 'tailwindcss';
@import 'tw-animate-css';

/* config  tailwind */
@config "../tailwind.config.ts";

/* base layer */
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    /* https://tailwindcss.com/docs/upgrade-guide#default-border-color */
    /* stylelint-disable-next-line custom-property-pattern */
    border-color: rgba(var(--colors-palette-gray-500Channel) / var(--opacity-border));
  }
}

@theme {
  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;

  @keyframes collapsible-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }

  --animate-slow-spin: spin 4s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* Shadcn UI Light Theme */
:root {
  --radius: 0.5rem;
  --background: var(--colors-common-white);
  --foreground: var(--colors-palette-gray-900);
  --card: var(--colors-common-white);
  --card-foreground: var(--colors-palette-gray-900);
  --popover: var(--colors-common-white);
  --popover-foreground: var(--colors-palette-gray-900);
  --primary: var(--colors-palette-primary-default);
  --primary-foreground: var(--colors-palette-primary-lighter);
  --secondary: var(--colors-palette-gray-200);
  --secondary-foreground: var(--colors-palette-gray-900);
  --muted: var(--colors-palette-gray-200);
  --muted-foreground: var(--colors-palette-gray-500);
  --accent: var(--colors-palette-gray-200);
  --accent-foreground: var(--colors-palette-gray-900);
  --destructive: var(--colors-palette-error-default);
  /* stylelint-disable-next-line custom-property-pattern */
  --border: rgba(var(--colors-palette-gray-500Channel) / var(--opacity-border));
  /* stylelint-disable-next-line custom-property-pattern */
  --input: rgba(var(--colors-palette-gray-500Channel) / var(--opacity-border));
  --ring: var(--colors-palette-primary-default);
  --chart-1: oklch(0.646 0.222 41.116deg);
  --chart-2: oklch(0.6 0.118 184.704deg);
  --chart-3: oklch(0.398 0.07 227.392deg);
  --chart-4: oklch(0.828 0.189 84.429deg);
  --chart-5: oklch(0.769 0.188 70.08deg);
  --sidebar: var(--colors-palette-gray-200);
  --sidebar-foreground: var(--colors-palette-gray-900);
  --sidebar-primary: var(--colors-palette-primary-default);
  --sidebar-primary-foreground: var(--colors-palette-primary-lighter);
  --sidebar-accent: var(--colors-palette-gray-200);
  --sidebar-accent-foreground: var(--colors-palette-gray-900);
  --sidebar-border: var(--colors-palette-gray-200);
  --sidebar-ring: var(--colors-palette-primary-default);

  /* slash layout */
  --layout-nav-width: 260px;
  --layout-nav-width-mini: 88px;
  --layout-nav-height-horizontal: 48px;
  --layout-header-height: 48px;
  --layout-multi-tabs-height: 28px;
}

/* Shadcn UI Dark Theme */
[data-theme-mode='dark'] {
  --background: var(--colors-palette-gray-900);
  --foreground: var(--colors-common-white);
  --card: var(--colors-palette-gray-900);
  --card-foreground: var(--colors-common-white);
  --popover: var(--colors-palette-gray-900);
  --popover-foreground: var(--colors-common-white);
  --primary: var(--colors-palette-primary-default);
  --primary-foreground: var(--colors-palette-primary-darker);
  --secondary: var(--colors-palette-gray-800);
  --secondary-foreground: var(--colors-common-white);
  --muted: var(--colors-palette-gray-800);
  --muted-foreground: var(--colors-palette-gray-500);
  --accent: var(--colors-palette-gray-800);
  --accent-foreground: var(--colors-common-white);
  --destructive: var(--colors-palette-error-default);
  /* stylelint-disable-next-line custom-property-pattern */
  --border: rgba(var(--colors-palette-gray-500Channel) / var(--opacity-border));
  /* stylelint-disable-next-line custom-property-pattern */
  --input: rgba(var(--colors-palette-gray-500Channel) / var(--opacity-border));
  --ring: var(--colors-palette-primary-default);
  --chart-1: oklch(0.488 0.243 264.376deg);
  --chart-2: oklch(0.696 0.17 162.48deg);
  --chart-3: oklch(0.769 0.188 70.08deg);
  --chart-4: oklch(0.627 0.265 303.9deg);
  --chart-5: oklch(0.645 0.246 16.439deg);
  --sidebar: var(--colors-palette-gray-800);
  --sidebar-foreground: var(--colors-common-white);
  --sidebar-primary: var(--colors-palette-primary-default);
  --sidebar-primary-foreground: var(--colors-palette-primary-darker);
  --sidebar-accent: var(--colors-palette-gray-800);
  --sidebar-accent-foreground: var(--colors-common-white);
  /* stylelint-disable-next-line custom-property-pattern */
  --sidebar-border: rgba(var(--colors-palette-gray-500Channel) / var(--opacity-border));
  --sidebar-ring: var(--colors-palette-primary-default);
}
